<template>
  <div>
    <div>{{year}}</div>
    <div>{{nowTime}}</div>
    <span id="my-span">{{name}}</span>
    <input type="text" v-model="name">
    <button @click="getData">get请求</button>
    <div>{{resData}}</div>
    <div class="error">{{errorMsg}}</div>
  </div>
</template>

<script>
import {getYear, getNowDateTime} from '../util/date_utils'
import {doGet} from '../util/http_client'
export default {
  name: 'Ok',
  data () {
    return {
      name: 'That is ok',
      nowTime: getNowDateTime(),
      resData: '',
      errorMsg: ''
    }
  },
  mounted () {
    setInterval(() => { // 箭头函数可以使用外部this
      this.nowTime = getNowDateTime()
    }, 1000)
  },
  methods: {
    getData () {
      // http请求
      doGet('./static/users.json',
        {}, // 请求头
        null, // 参数
        (data) => { // 成功响应
          if (data.res.statusCode !== 0) { // 错误提示
            this.errorMsg = data.res.statusMsg
          } else { // 成功数据
            this.resData = JSON.stringify(data.res)
          }
        }, (data) => { // 请求错误
          alert(JSON.stringify(data.res))
        })
    }
  },
  computed: {
    year () {
      return getYear()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #my-span {
    background: blueviolet;
  }
  .error {
    color: red;
  }
</style>
